<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>11.17上课</title>
    <style>
        .box {
            list-style: none;
            padding: 10px;
            display: flex;
            gap: 10px;
        }

        li {
            width: 100px;
            height: 150px;
            text-align: center;
            border: 1px solid #eee;
        }

        img {
            width: 80px;
            height: 120px;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <ul class="box"></ul>

    <script>
        const data = [
            { title: '小特', img: "img/特雷西亚.jpg" },
            { title: 'amiya', img: 'img/小驴.jpg' },
            { title: '蓝毒', img: 'img/蓝毒小宝贝.jpg' }
        ];

        const ull = document.querySelector('.box');

        for (let i = 0; i < data.length; i++) {
            const li = document.createElement('li');
            li.innerHTML = `
        < img src="${data[i].img}" alt="">
        <p>${data[i].title}</p >
      `;
            ull.appendChild(li);
        }

    </script>
</body>

</html>